<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.js"></script>
    <style>
        #app{width: 96%;margin-left: 2%;border:1px solid;height: 100px}
    </style>
</head>
<body>
<div id="app"></div>
<canvas id="myChart" width="400" height="300"></canvas>
<script>
    const ctx = document.getElementById('myChart');
    const labels = ['第一周', '第二周', '第三周','第四周'];  // 设置 X 轴上对应的标签
    const data = {
        labels: labels,
        datasets: [{
            label: '第一个柱形图',
            data: [65, 59, 80, 40],
            backgroundColor: [      // 设置每个柱形图的背景颜色
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 205, 86, 0.2)',
                'rgba(201, 203, 207, 0.2)'
            ],
            borderColor: [     //设置每个柱形图边框线条颜色
                'rgb(255, 99, 132)',
                'rgb(255, 159, 64)',
                'rgb(255, 205, 86)',
                'rgb(201, 203, 207)'
            ],
            borderWidth: 1     // 设置线条宽度
        }],
        options: {
            responsive: true,
            maintainAspectRatio: false, // 这有助于避免图表在移动设备上变形
            plugins: {
                legend: {
                    position: 'top' // 将图例移到顶部，以便更好地适应小屏幕
                },
                title: {
                    display: true,
                    text: '示例图表'
                }
            },
            scales: {
                x: {
                    display: true,
                    title: {
                        display: true,
                        text: 'X轴'
                    }
                },
                y: {
                    display: false,
                    title: {
                        display: true,
                        text: 'Y轴'
                    }
                }
            }
        },
    };
    const config = {
        type: 'bar', // 设置图表类型
        data: data,  // 设置数据集
        options: {
            scales: {
                y: {
                    beginAtZero: true // 设置 y 轴从 0 开始
                }
            }
        },
    };
    const myChart = new Chart(ctx, config);
</script>

</body>
</html>